import React,{useCallback} from 'react'
import {ShowListWrapper} from './styledShowList'
import {useHistory} from 'react-router-dom'

export default function ShowList(props) {
    // console.log(props.list);
    const history=useHistory()
    const handleClick=useCallback(
        (product)=>{
            return()=>{
                history.push('/detail',{product})
            }
        },[]
    )
    return (
        <ShowListWrapper
        >
        <div className='recommend'>
            <ul>
                {
                    props.list.map((li,index)=>{
                        // console.log(li.product['logoUrl']);
                        return(
                        <li key={index}
                        onClick={handleClick(li)}
                        >
                            <div>
                                <img src={li.logoUrl}/>
                            </div>
                            <div>
                                <h2>{li.title}</h2>
                                <p>
                                    <span>￥{li.price/100}</span>
                                    <span className='num'>{li.soldNum}人付款</span>
                                </p>
                            </div>
                        </li>
                        )
                    })
                }
                
            </ul>
        </div>
           
        </ShowListWrapper>
    )
}
